import { useUserinfo } from '@/stores/userinfo'

export const jurisdiction = {
  mounted(el: HTMLElement, binding: { value: string[] }) {
    console.log('mounted', el, binding)
    const { scope } = useUserinfo()
    console.log('scope:', scope)

    if (scope == null || !binding.value.some((item) => scope.includes(item))) {
      el.parentNode?.removeChild(el)
    }
  },
}

export const role = (el: HTMLElement, binding: { value: string[] }) => {
  const { roles } = useUserinfo()
  console.log('roles:', binding, roles)

  if (!binding.value && roles.includes(binding.value)){
    el.style.display = 'none'
  }
}

export const autherization = {
  install(app: any) {
    app.directive('jurisdiction', jurisdiction)
    app.directive('role', role)
  }
}